<!--
 * @Author: wuzhen
 * @Date: 2019-12-03 14:04:35
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-12-06 09:15:02
 * @Description: 图片预览
 -->

<template>
  <div class="pre-img" :style="styleProps">
    <img :src="'https://res.squrab.com/' + src">
    <div class="pre-img-cover" :style="styleProps">
      <Icon type="ios-eye-outline" @click.native="showImg=true"></Icon>
    </div>
    <Modal title="图片预览" v-model="showImg" :footer-hide="footerHide">
      <img :src="preSrc ? ('https://res.squrab.com/' + preSrc): ('https://res.squrab.com/' + src)" v-if="showImg" style="width: 100%">
      <div slot="footer">
        <slot name='modalFooter'></slot>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ""
    },
    preSrc: {
      type: String,
      default: ""
    },
    width: {
      type: [String, Number],
      default: 150
    },
    footerHide: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showImg: false,
      styleProps: {
        width: this.width + "px"
      }
    };
  }
};
</script>
<style lang="less" scoped>
.pre-img {
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  border: 1px solid #eee;
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
  margin-right: 15px;
  img {
    width: 100%;
    height: 100%;
  }
  &-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &:hover {
    .pre-img-cover {
      display: block;
    }
  }
}
</style>